<template>
  <div class="hemo">
    <router-link to="/about">添加笔记</router-link>
    <div v-for="(item,index) in arr" :key="index" class="box">
     <p><span>用户名:</span><span>{{item.title}}</span></p>
     <p><span>内容:</span><span v-html="item.msg"></span></p>
     <button @click="del(index)">删除</button>
    </div>
    <router-view />
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  methods: {
    del(index){
      console.log(this.arr);
      this.arr.splice(index, 1);
    }
  },
  computed:{
    ...mapState(['arr'])
  }
 
};
</script>

<style scoped>
.box{
  width: 300px;
  border: 1px solid #000;
}
.box span{
  /* display: block; */
  /* height: 50px; */
  font-size: 18px;
  font-weight: bold;
}
</style>